var cs;

function initCompass () {
	try
	{
		setInterval("drawCompass()",100);
	}
	catch (e)
	{
		alert(e);
	}
}

function drawCompass()
{
	try
	{
		var canvas = document.getElementById('compass');
		
		cs = canvas.height/1000.0;
	
		// Make sure we don't execute when canvas isn't supported
		if(canvas.getContext) {
			var ctx = canvas.getContext('2d');
			var r = canvas.width*3/9;
			var x = canvas.width/2;
			var y = canvas.height*5/8;
			ctx.beginPath();
			ctx.fillStyle = "#333";
			ctx.fillRect(0,0,canvas.width,canvas.height);
			
			ctx.beginPath();
	    	ctx.arc(x, y, r, 0, 2 * Math.PI, false);
	    	ctx.fillStyle = "black";
	    	ctx.fill();
	    	
	    	var track = 0;
	    	var inop = true;
	    	ctx.textAlign = "right";
		    ctx.textBaseline = "top";
		    ctx.fillStyle = "#BBB";
	    	ctx.font = (50*cs)+"pt Calibri";
	    	//get the track and state the mode
	    	if (plane_heading != null)
	    	{
	    		track = plane_heading;
	    		inop = false;
	    		ctx.fillText("HEADING",canvas.width,0);
	    	}
	    	else if (plane_course != null && !plane_gps_valid)
	    	{
	    		track = plane_course;
	    		inop = false;
	    		ctx.fillText("COURSE",canvas.width,0);
	    	}
	    	drawMarks(ctx,r,x,y,track);//draw the compass
	    	
	    	//track arrow
	    	ctx.beginPath();
    		ctx.fillStyle = "#770";
    		var arrow_top = (y-r)*3/4;
    		var arrow_bottom = y-(r*1.05);
    		var arrow_width = r/10;
    		ctx.moveTo(x,arrow_bottom);
			ctx.lineTo(x-arrow_width,arrow_top);
			ctx.lineTo(x+arrow_width,arrow_top);
			ctx.lineTo(x,arrow_bottom);
			ctx.lineTo(x-arrow_width,arrow_top);
			//ctx.fill();
			ctx.strokeStyle = "#AAA";
			ctx.lineWidth = r/40;
			ctx.lineJoin = "round";
			ctx.stroke();
			
			//draw the track in text
			ctx.textAlign = "center";
		    ctx.textBaseline = "bottom";
		    ctx.fillStyle = "FFF";
	    	ctx.font = (100*cs)+"pt Calibri";
	    	var ttt = Math.round(track);
	    	if (ttt<10){ttt="00"+ttt;}
	    	else if (ttt<100){ttt="0"+ttt;}
			ctx.fillText(ttt, x, arrow_top);
			
			var toBug = null; //default to none
			var tobase = null; //default to none	
	    	
	    	if (plane_lat!=0 && plane_lon!=0 && !inop)
	    	{
	    		//this is the heading bug (drawn in light purple, behind the arrow)
	    		toBug = bearingTo(plane_lat,plane_lon,hdgbug_lat,hdgbug_lon);
	    		ctx.save();
	    		ctx.translate(x,y);
	    		ctx.rotate(deg2rad(180+toBug-track));
	    		ctx.beginPath();
	    		ctx.strokeStyle = "#F0F";
	    		ctx.lineWidth = r/50;
	    		ctx.moveTo(0,0);
	    		ctx.lineTo(0,r*0.1);
	    		ctx.moveTo(0,r*0.2);
	    		ctx.lineTo(0,r*0.3);
	    		ctx.moveTo(0,r*0.4);
	    		ctx.lineTo(0,r*0.5);
	    		ctx.moveTo(0,r*0.6);
	    		ctx.lineTo(0,r*0.7);
	    		ctx.moveTo(0,r*0.8);
	    		ctx.lineTo(0,r*0.9);
	    		
	    		var w = r/10;
	    		ctx.moveTo(-w,r);
	    		ctx.lineTo(w,r);
	    		ctx.lineTo(w,r+w);
	    		ctx.lineTo(w/2,r+w);
	    		ctx.lineTo(0,r+(w/2));
	    		ctx.lineTo(-w/2,r+w);
	    		ctx.lineTo(-w,r+w);
	    		ctx.lineTo(-w,r);
	    		ctx.stroke();
	    		
	    		ctx.restore();
	    		
	    		//this is the arrow pointing towards base in the middle of the compass (in yellow)
	    		tobase = bearingTo(plane_lat,plane_lon,gs_lat,gs_lon);
		    	ctx.save();
		    	ctx.translate(x,y);
		    	var arrow_top = r*0.6;
		    	var arrow_bottom = r*0.5;
		    	var arrow_width = r/10;
		    	ctx.rotate(deg2rad(180+tobase-track));
		    	ctx.beginPath();
		    	ctx.strokeStyle = "#FF0";
		    	ctx.lineWidth = r/30;
		    	ctx.moveTo(0,-arrow_bottom);
		    	ctx.lineTo(0,arrow_bottom);
		    	ctx.stroke();
		    	
		    	ctx.beginPath();
		    	ctx.fillStyle = "#FF0";
		    	ctx.moveTo(0,arrow_top);
		    	ctx.lineTo(arrow_width,arrow_bottom);
		    	ctx.lineTo(-arrow_width,arrow_bottom);
		    	ctx.closePath();
		    	ctx.fill();
		    	ctx.restore();
	    	}
	    	
	    	ctx.textAlign = "left";
		    ctx.textBaseline = "bottom";
		    ctx.fillStyle = "FF0";
	    	ctx.font = (70*cs)+"pt Calibri";
	    	if (tobase!=null)
	    	{
	    		//shows the deg and dist towards base
				ctx.fillText("GS: "+Math.round(tobase), 0, canvas.height);
			}
			if (plane_lat != 0 && plane_lon != 0)
			{
				ctx.textAlign = "right";
				var dist = Math.round(distanceTo(plane_lat,plane_lon,gs_lat,gs_lon,UNIT_MI)*100)/100;
				ctx.fillText(dist+" mi", canvas.width, canvas.height);
			}
			
			ctx.textAlign = "left";
		    ctx.textBaseline = "bottom";
		    ctx.fillStyle = "F0F";
	    	ctx.font = (70*cs)+"pt Calibri";
			if (toBug!=null)
	    	{
	    		//shows the deg and dist towards base
				ctx.fillText("BUG: "+Math.round(toBug), 0, canvas.height/4);
			}
			if (plane_lat != 0 && plane_lon != 0)
			{
				ctx.font = (50*cs)+"pt Calibri";
				ctx.textAlign = "right";
				var dist = Math.round(distanceTo(plane_lat,plane_lon,hdgbug_lat,hdgbug_lon,UNIT_MI)*100)/100;
				ctx.fillText("P: "+dist+" mi", canvas.width, canvas.height/4);
				var dist = Math.round(distanceTo(hdgbug_lat,hdgbug_lon,gs_lat,gs_lon,UNIT_MI)*100)/100;
				ctx.textBaseline = "top";
				ctx.fillText("GS: "+dist+" mi", canvas.width, canvas.height/4);
			}
			
			//Show the autopilot mode{
			ctx.font = (50*cs)+"pt Calibri";
			ctx.textAlign = "right";
			ctx.textBaseline = "center";
			var text;
			if (plane_ap_en)
			{
				text = "ON";
				ctx.fillStyle = "0A0";
			}
			else
			{
				text = "OFF";
				ctx.fillStyle = "55F";
			}
			ctx.fillText("AP: "+text,canvas.width,canvas.height/14);
			//} Show the autopilot mode
			
			if (inop)
	    	{
	    		//compass inop
	    		ctx.beginPath();
	    		ctx.strokeStyle = "#F00";
	    		ctx.lineWidth = canvas.width/20;
	    		ctx.moveTo(0,0);
				ctx.lineTo(canvas.width,canvas.height);
				
				ctx.moveTo(canvas.width,0);
				ctx.lineTo(0,canvas.height);
				
				ctx.stroke();
	    	}
			
		}
		else
		{
			alert("NO COMPASS!");
		}
	}
	catch(e)
	{
		alert(e);
	}
}

function drawMarks(ctx, r, x, y, heading)
{
	try
	{
		ctx.beginPath();
		ctx.strokeStyle = "#AAA";
		ctx.lineWidth = r/100;
		ctx.save();
		ctx.translate(x,y);
		for (var i = 0; i < 360; i+=10)
		{
			len = r/24;
			if (i%30==0){len = r/12;}
			if (i%90==0){len = r/6;}
			rad = deg2rad(i-heading);
			ctx.save();
			ctx.rotate(rad);
			
			ctx.moveTo(0,r);
			ctx.lineTo(0,r-len);
			
			if (i%30==0)
			{
			    ctx.textAlign = "center";
			    ctx.textBaseline = "top";
			    ctx.fillStyle = "white";
			    if (i%90==0)
			    {
			    	var txt;
			    	if (i==0){txt = "N";}
			    	else if (i==90){txt = "E";}
			    	else if (i==180){txt = "S";}
			    	else if (i==270){txt = "W";}
			    	ctx.font = (70*cs)+"pt Calibri";
			    	ctx.fillText(txt, 0, -r*0.8);
			    }
			    else
			    {
			    	ctx.font = (40*cs)+"pt Calibri";
			    	ctx.fillText(i, 0, -r*0.9);
			    }
		   }
			
			ctx.restore();
		}
		ctx.restore();
		ctx.stroke();
	}
	catch (e)
	{
		alert(e);
	}
}
